<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-14 11:09:59
 * @LastEditTime : 2020-01-07 13:28:47
 * @LastEditors  : Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vant.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>
    <style type="text/css">
        .table {
            width: 100%;
            overflow: hidden;
        }

        table {
            width: 100%;
            overflow: hidden;
        }

        table tr th,
        table tr td {
            border: 0 !important;
            padding: 3px !important;
            font-size: 14px;
        }

        .line {
            width: 100%;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }

        .td-remark {
            color: #969799;
            width: 100%;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }

        .van-stepper__input {
            line-height: 28px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="打印预览" left-arrow @click-left="onClickLeft">
                <div slot="right" class="head-right">
                    <span @click="toPrintConfig">
                        设置
                    </span>
                </div>
            </van-nav-bar>
            <div class="body-with-bottom">
                <div class="content">
                    <div class="table">
                        <table>
                            <tr>
                                <th colspan="6" style="text-align: center;font-size: 20px;">{{printData.title}}</th>
                            </tr>
                            <tr>
                                <th colspan="6" style="text-align: center;font-size: 18px;">{{printData.subtitle}}</th>
                            </tr>
                            <tr v-for="(value,index) in printData.top" :key="index">
                                <td colspan="6">{{index}}：{{value}}</td>
                            </tr>
                            <tr>
                                <td colspan="6">
                                    <div class="line" :style="{width:getWidth()}">
                                        ----------------------------------------------------------------------------------------------------------------
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td v-for="(value,index) in printData.node[0]">{{index}}</td>
                            </tr>
                            <tr v-for="(value1,index1) in printData.node">
                                <!-- <td v-for="(value2,index2) in value1">{{value2}}</td> -->
                                <td v-for="(value2,index2) in value1" :colspan="index2 == '备注'?6:1">
                                    <div v-show="index2=='备注'" class="td-remark" :style="{width:getWidth()}">{{value2}}</div>
                                    <div v-show="index2!='备注'">{{value2}}</div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="6">
                                    <div class="line" :style="{width:getWidth()}">
                                        ----------------------------------------------------------------------------------------------------------------
                                    </div>
                                </td>
                            </tr>
                            <tr v-for="(value,index) in printData.center">
                                <td colspan="6">{{index}}：{{value}}</td>
                            </tr>
                            <tr>
                                <td colspan="6">
                                    <div class="line" :style="{width:getWidth()}">
                                        ----------------------------------------------------------------------------------------------------------------
                                    </div>
                                </td>
                            </tr>
                            <tr v-for="(value,index) in printData.bottom">
                                <td colspan="6">{{index}}：{{value}}</td>
                            </tr>
                            <tr>
                                <td colspan="6">打印时间：{{nowDate}}</td>
                            </tr>
                            <tr>
                                <td colspan="6">客户签字</td>
                            </tr>
                        </table>
                    </div>

                </div>

                <van-loading v-if="showLoading" />
            </div>
            <div class="bottom">
                <div class="bottom-left-label">
                    <span>打印张数：</span>
                    <van-stepper v-model="copyNum" min="1"></van-stepper>
                </div>
                <div class="bottom-right-button">
                    <van-button type="primary" block @click="printing">打&nbsp;&nbsp;&nbsp;&nbsp;印</van-button>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();
        var printModule = api.require('posPrinter');
        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                printData: JSON.parse(window.localStorage.getItem('printData')),
                nowDate: FLD.getFormatDate(),
                copyNum: 1
            },
            created: function () {


            },
            methods: {
                getWidth(){
                    return api.winWidth + 'px';
                },
                toPrintConfig() {
                    api.openWin({
                        name: 'printConfig',
                        url: 'printConfig.html',
                        reload: true,
                        slidBackEnabled: false
                    })
                },
                getStringLength(str) {
                    var slength = 0;
                    for (i = 0; i < str.length; i++) {
                        if ((str.charCodeAt(i) >= 0) && (str.charCodeAt(i) <= 255))
                            slength = slength + 1;
                        else
                            slength = slength + 2;
                    }
                    return slength;
                },
                printing() {
                    var that = this;
                    if (window.localStorage.getItem('printDevice')) {
                        var device = JSON.parse(window.localStorage.getItem('printDevice'));
                        var orderInfo;
                        var line = "------------------------------------------------<BR>";
                        var line1 = "------------------------------------------------------------------------------------------------";
                        if (device.name.indexOf('Jolimark') > -1) {
                            line = "------------------------------------------------------------------------------------------------<BR>";
                        }
                        orderInfo = "<CA><B>" + that.printData.title + "</B></CA><BR>";
                        orderInfo += "<BR>";
                        orderInfo += "<CA>" + that.printData.subtitle + "</CA><BR>";
                        orderInfo += "<BR>";
                        for (var i in that.printData.top) {
                            orderInfo += i + "：" + that.printData.top[i] + "<BR>";
                        }
                        orderInfo += line;
                        if (device.name.indexOf('Jolimark') > -1) {
                            for (var i in that.printData.node[0]) {
                                if (i == '名称') {
                                    orderInfo += i + "                                  ";
                                } else if (i != '备注') {
                                    orderInfo += i + "          ";
                                }

                            }
                            orderInfo += "<BR>";

                            for (var i in that.printData.node) {
                                for (var j in that.printData.node[i]) {
                                    if (j == '名称') {
                                        orderInfo += that.printData.node[i][j];
                                        var length1 = 38 - that.getStringLength(that.printData.node[i][j] + '');
                                        for (var j1 = 0; j1 < length1; j1++) {
                                            orderInfo += " ";
                                        }
                                    } else if (j == '备注') {
                                        var remark = '';
                                        for (var y in that.printData.node[i][j]) {
                                            remark += that.printData.node[i][j][y];
                                            if (that.getStringLength(remark + '') > 80) {
                                                remark += '...';
                                                break;
                                            }
                                        }
                                        orderInfo += remark;
                                        orderInfo += "<BR>";
                                        if (i == that.printData.node.length - 1) {
                                            orderInfo += "<BR>";
                                        } else {
                                            orderInfo += line1;
                                        }
                                    } else {
                                        orderInfo += that.printData.node[i][j] || '';
                                        var length2 = 14 - that.getStringLength(that.printData.node[i][j] + '');
                                        for (var j2 = 0; j2 < length2; j2++) {
                                            orderInfo += " ";
                                        }
                                    }

                                }
                                orderInfo += "<BR>";


                            }
                        } else {
                            for (var i in that.printData.node[0]) {
                                if (i == '名称') {
                                    orderInfo += i + "                 ";
                                } else if (i != '备注') {
                                    orderInfo += i + "    ";
                                }
                            }
                            orderInfo += "<BR>";

                            for (var i in that.printData.node) {
                                for (var j in that.printData.node[i]) {

                                    if (j == '名称') {
                                        orderInfo += that.printData.node[i][j];
                                        var length1 = 17 - that.getStringLength(that.printData.node[i][j]);
                                        for (var j1 = 0; j1 < length1; j1++) {
                                            orderInfo += " ";
                                        }
                                    } else if (j != '备注') {
                                        orderInfo += that.printData.node[i][j];
                                        var length2 = 8 - that.getStringLength(that.printData.node[i][j]);
                                        for (var j2 = 0; j2 < length2; j2++) {
                                            orderInfo += " ";
                                        }
                                    }

                                }
                                orderInfo += "<BR>";
                            }
                        }


                        orderInfo += line;
                        for (var i in that.printData.center) {
                            orderInfo += i + "：" + that.printData.center[i] + "<BR>";
                        }
                        orderInfo += line;
                        for (var i in that.printData.bottom) {
                            orderInfo += i + "：" + that.printData.bottom[i] + "<BR>";
                        }
                        orderInfo += "打印时间：" + FLD.getFormatDate() + "<BR>";
                        orderInfo += "客户签字：<BR>";
                        orderInfo += "<BR><BR><BR><BR>";
                        if (api.systemType == 'android') {
                            var param = {
                                taskList: [{
                                    printerAddr: device.address,
                                    printerEncoding: 'gbk',
                                    content: orderInfo,
                                    keepAlive: true,
                                    copyNum: that.copyNum
                                }]
                            };
                            printModule.print(param);
                        } else {
                            var param =
                            {
                                taskList:
                                    [
                                        {
                                            printerAddr: device.address,
                                            content: orderInfo,
                                            keepAlive: true,       //蓝牙打印机，建议把keepAlive设为true
                                            copyNum: that.copyNum
                                        }
                                    ]
                            };
                            printModule.printOnSpecifiedPrinters(param);
                        }
                    } else {
                        layer.open({
                            content: '请先绑定打印机!',
                            skin: 'msg',
                            time: 2
                        });
                    }
                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>